<template>
    <div class="table-container" :class="{ border, scroll }">
        <table v-if="state === 'normal'">
            <thead>
                <tr>
                    <slot name="thead"></slot>
                </tr>
            </thead>
            <tbody>
                <slot></slot>
            </tbody>
        </table>
        <p v-else class="absolute-center">{{ msgMap[state] }}</p>
    </div>
</template>

<script>
    /**
     * 表格
     */
    export default {
        props: {
            /** 
             * 表格状态
             * - normal: 正常，显示表格
             * - empty: 数据为空
             * - loading: 加载中
             */
            state: {
                type: String,
                validator: (val) => ['loading', 'empty', 'normal'].includes(val),
                default: 'normal'
            },
            /** 是否显示边框 */
            border: {
                type: Boolean,
                default: true
            },
            /** 是否可滚动 */
            scroll: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                msgMap: {
                    loading: '加载中...',
                    empty: '未查询到数据'
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .table-container {
        position: relative;
        flex: 1;
        &.border {
            border: 1px solid var(--color-grey);
        }
        &.scroll {
            overflow-x: hidden;
            overflow-y: scroll;
        }
        & > p {
            font-size: 24px;
            letter-spacing: 2px;
        }
    }
    table {
        border-collapse: collapse;
        width: 100%;
    }
    thead {
        font-weight: bold;
        border-bottom: 2px solid;
        white-space: nowrap;
        text-align: center;
    }
    tbody:deep(tr) {
        border-bottom: 1px solid #dee2e6;
    }
    :deep(td), :deep(th) {
        padding: 10px;
    }
</style>